[431] Update default page template for using hero section and shared widgets#22
Conversation
- Create default-hero widget module - Add widget template - Register widget in app.js
- Add header area with default-hero widget - Update template to display hero section - Add conditional title display when no hero is present
- Replace custom widgets with mainWidgets - Update main area configuration
- Reorganize fields into logical groups - Add hero group for title and header - Add mainArea group for main content
WalkthroughThe changes introduce a new "Default Hero" widget module and restructure the page layout in the ApostropheCMS project. The main page type now separates the hero section from the main content by defining distinct Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PageTemplate
participant DefaultHeroWidget
User->>PageTemplate: Request page
PageTemplate->>PageTemplate: Render 'header' area (Default Hero)
alt If header is present
PageTemplate-->>User: Render hero widget (title, subtitle, background image)
else If header is absent
PageTemplate-->>User: Render page title
end
PageTemplate->>PageTemplate: Render 'main' area (other widgets)
PageTemplate-->>User: Render complete page
sequenceDiagram
participant Editor
participant PageAdminUI
participant DefaultHeroWidget
Editor->>PageAdminUI: Edit page
PageAdminUI->>PageAdminUI: Show 'header' area (allows only Default Hero widget)
PageAdminUI->>DefaultHeroWidget: Configure title, subtitle, background image
PageAdminUI->>PageAdminUI: Show 'main' area (other widgets)
Editor->>PageAdminUI: Save changes
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
🔍 Vulnerabilities of
|
| digest | sha256:97cbdd7e77c4e0d7a04b1c0ad3e6e8cdd13ff5d0371517f051599632e22288eb |
| vulnerabilities |     |
| platform | linux/amd64 |
| size | 643 MB |
| packages | 1447 |
📦 Base Image node:23-bullseye
| also known as |
|
| digest | sha256:128067b8c33d5ad2834513ed3351f29803280407037c2cc66957f0e5d1b3ddd1 |
| vulnerabilities |     |
Description
| ||||||||||||
Description
| ||||||||||||
Description
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
website/modules/default-hero-widget/views/widget.html (1)
1-16: Clean and well-structured template implementation.The template correctly implements the hero widget with proper conditionals and BEM-style class naming. The structure logically separates the background from the content.
Consider adding a few comments to improve maintainability:
{% set widget = data.widget %} +{# Hero container with optional background #} <div class="default-hero"> {% if widget.backgroundImage %} <div class="default-hero__background"> {% area widget, 'backgroundImage' %} </div> {% endif %} +{# Hero content with title and optional subtitle #} <div class="default-hero__content"> <h1 class="default-hero__title">{{ widget.title }}</h1> {% if widget.subtitle %} <p class="default-hero__subtitle">{{ widget.subtitle }}</p> {% endif %} </div> </div>website/modules/default-page/views/page.html (1)
5-7: Good conditional rendering of title based on hero presence.The conditional logic to only show the page title when no header content exists is appropriate. However, the template formatting on line 7 is quite compressed, with multiple template tags on a single line without proper spacing.
Consider improving readability by formatting the template tags with proper spacing and line breaks:
- {% if not data.page.header %} - <h1>{{ data.page.title }}</h1> - {% endif %} {% area data.page, 'header' %} {% area data.page, 'main' %} + {% if not data.page.header %} + <h1>{{ data.page.title }}</h1> + {% endif %} + + {% area data.page, 'header' %} + + {% area data.page, 'main' %}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
website/app.js(2 hunks)website/modules/default-hero-widget/index.js(1 hunks)website/modules/default-hero-widget/views/widget.html(1 hunks)website/modules/default-page/index.js(1 hunks)website/modules/default-page/views/page.html(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: sonarqube
- GitHub Check: security-scan
🔇 Additional comments (9)
website/modules/default-page/index.js (4)
1-2: Good modularization approach with external widgets configuration.Importing widget configurations from an external file is a good practice that promotes code reusability and maintainability. This approach allows the same widget configuration to be used across different page types.
10-18: Good separation of hero section with appropriate constraints.The creation of a dedicated
headerarea with a maximum of 1 widget and limiting it to only thedefault-herowidget type is a good architectural decision. This ensures consistent page headers across the site and simplifies the content editing experience.
19-22: Improved structure using external widget configuration.Replacing inline widget definitions with the imported
mainWidgetsconfiguration makes the code cleaner and more maintainable. This approach also ensures consistency across different areas of the application that use the same set of widgets.
25-32: Logical field grouping that improves editor experience.The reorganization of fields into 'hero' and 'mainArea' groups creates a clear separation between the page header and main content in the CMS interface. This improves the content editing experience by providing a more intuitive organization of fields.
website/modules/default-hero-widget/index.js (1)
1-29: Well-structured implementation of the Default Hero widget.The widget is properly defined with appropriate fields for a hero component (title, subtitle, and backgroundImage). Good job restricting the backgroundImage to a single image widget and marking the title as required. The code follows ApostropheCMS conventions and is well-formatted with consistent styling.
website/app.js (4)
15-21: Improved code style with trailing commas.The formatting changes with trailing commas improve code consistency and will make future additions cleaner.
29-30: Consistent formatting applied to widget options.Good application of trailing commas to the widget options objects for consistency.
Also applies to: 34-35
40-40: Successfully registered the new Default Hero widget.The new widget module is properly added to the application configuration alongside other custom widgets.
82-83: Consistent trailing commas applied throughout.Maintaining consistent code style with trailing commas at the end of the configuration.
|
5 participants
Summary by CodeRabbit
New Features
Style
Refactor